<template>
	<view :class="['mask', {'ac': maskTransiton}]" :style="{'display': maskStatus}" @tap="closeMask"
	 @touchmove.stop.prevent></view>
</template>

<script>
	export default {
		data() {
			return {
				maskStatus: 'none', // mask的显示状态
				maskTransiton: false, // mask的激活动画开关
			};
		},
		props: {
			// mask组件状态
			maskSwitch: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			// 监听maskSwitch
			maskSwitch(newVal, oldVal) {
				if (newVal) {
					this.openMask()
				} else {
					this.closeMask()
				}
			}
		},
		methods: {
			// 打开mask
			openMask() {
				this.maskStatus = 'block'
				setTimeout(() => {
					this.maskTransiton = true
				}, 50)
			},
			// 关闭mask
			closeMask() {
				this.maskTransiton = false
				this.$emit('closeMask')
				setTimeout(() => {
					this.maskStatus = 'none'
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/mixin.scss';

	.mask {
		transition: all .5s;
		@include mask(0, 98);

		&.ac {
			@include mask(.6, 98);
		}
	}
</style>
